import Module from "./module";
import bgImg from "./assets/21174.png";
import icon1 from "./assets/21176.svg";
import icon2 from "./assets/21177.svg";
import icon3 from "./assets/21178.svg";
import icon4 from "./assets/21179.svg";
import icon5 from "./assets/21180.svg";
import icon6 from "./assets/21181.svg";
import itemBg from "./assets/4269.svg";
import { range } from "lodash";

export default defineComponent({
	name: "EfficiencyRanking",
	setup() {
		const data = [
			{ icon: icon1, title: "宏电深圳光电产业园站", rate: 86.3 },
			{ icon: icon2, title: "武汉光电产业园", rate: 82 },
			{ icon: icon3, title: "宏电深圳光电产业园站", rate: 76.3 },
			{ icon: icon4, title: "武汉光电产业园", rate: 72 },
			{ icon: icon5, title: "宏电深圳光电产业园站", rate: 66.3 },
			{ icon: icon6, title: "武汉光电产业园", rate: 52 }
		];
		const dom = ref();
		const n = ref(0);

		const fillItem = () => {
			console.log(dom.value.clientHeight);
			let h = dom.value.clientHeight;
			n.value = Math.floor(h / 65);
		};
		onMounted(() => {
			setTimeout(() => fillItem(), 200);
			window.onresize = () => fillItem();
		});
		return () => (
			<Module img={bgImg}>
				<div className={"w-full h-full overflow-hidden"} ref={dom}>
					{range(0, n.value, 1).map(i => {
						return <Item icon={data[i].icon} title={data[i].title} rate={data[i].rate}></Item>;
					})}
				</div>
			</Module>
		);
	}
});

const Item = defineComponent({
	name: "Item",
	props: { icon: String, title: String, rate: Number },
	setup(props) {
		const dom = ref();
		const activeDom = ref();
		onMounted(() => {
			setTimeout(async () => {
				const activeWidth = dom.value.clientWidth * (props.rate / 100);
				for (let i in range(1, Math.floor(activeWidth), 1)) {
					activeDom.value.style.width = i + "px";
					await new Promise(resolve => setTimeout(resolve, 5));
				}
			}, 500);
		});
		return () => (
			<div className={"w-full h-[65px] flex flex-row box-border p-4 items-center relative "}>
				<img className={"w-full h-full absolute top-0 left-0 right-0 bottom-0"} src={itemBg} alt={""}></img>
				<div className={"icon w-fit h-fit mr-2"}>
					<img className={"h-[24px] w-[24px]"} src={props.icon} alt={""} />
				</div>
				<div className={"flex flex-col w-full h-full justify-between box-border"} ref={dom}>
					<div className={"flex  flex-row  justify-between"}>
						<div>{props.title}</div>
						<div className={"text-[16px]"}>{props.rate}%</div>
					</div>
					<div className={"w-full h-[4px] relative"}>
						<div className={"h-[4px] absolute top-0 left-0 w-full bg-[#152947]"}></div>
						<div
							className={"h-[4px] absolute top-0 left-0 w-0"}
							style={{
								"border-radius": "2px",
								background: "linear-gradient(90.00deg, #085fe2 0%, #1196fc 100%)"
							}}
							ref={activeDom}
						></div>
					</div>
				</div>
			</div>
		);
	}
});
